<script setup>
import {reactive, inject, ref} from "vue";
import {ElLoading, ElMessage} from "element-plus";
import {login, sendForgotPassCaptcha, sendSignInCaptcha} from "@/api/AuthApi.js";
import router from "@/router/index.js";
import RegisterDialog from "@/components/dialog/RegisterDialog.vue";

const isShow = inject("isShow");
const logInForm = reactive({});
const signInForm = reactive({
  user: reactive({})
});
const forgotPassForm = reactive({});
const sendCaptchaBtnDis = ref(false);
const sendCaptchaBtnValue = ref('发送验证码');

function logIn() {
  if (logInForm.account === '' || logInForm.password === '') {
    ElMessage({
      message: '请输入账号或者密码！',
      type: 'warning'
    });
    return
  }
  const loading = ElLoading.service({
    lock: true,
    text: '登录中...',
    background: 'rgba(0, 0, 0, 0.7)',
  });
  login(logInForm.account, logInForm.password).then(resp=>{
    if(resp.code===1) {
      console.log("登录成功！！！");
      ElMessage({
        message: '登录成功！',
        type: 'success'
      });
      router.push("/home");
    } else {
      console.log("登录失败！！！");
      ElMessage({
        message: '登录失败！',
        type: 'warning'
      });
    }
    loading.close();
  }).catch(err=>{
    console.log("登录失败！");
    console.log(err);
    loading.close();
    ElMessage({
      message: '登录失败！',
      type: 'warning'
    });
  });
}
// 发送注册验证码
function signInCaptcha(email) {
  if (email === '') {
    ElMessage({
      message: '请输入电子邮箱！',
      type: 'warning'
    });
    return;
  }
  sendCaptchaBtnDis.value = true;//禁用按钮
  sendSignInCaptcha(email).then(resp=>{
    var x = 60;
    var timeOutId = setInterval(()=>{
      sendCaptchaBtnValue.value = x+'s';
      x--;
      if (x === 0) {
        sendCaptchaBtnValue.value = '发送验证码';
        sendCaptchaBtnDis.value = false;//解禁
        clearInterval(timeOutId);
      }
    },1000);
    ElMessage({
      message: '验证码已发送，请注意查看。',
      type: 'success'
    });
  }).catch(resp=>{
    ElMessage({
      message: '电子邮箱不存在或者有误，请重新输入！',
      type: 'warning'
    });
    sendCaptchaBtnDis.value = false;//解禁
  })
}
// 发送忘记密码验证码
function forgotPassCaptcha(email) {
  if (email === '') {
    ElMessage({
      message: '请输入电子邮箱！',
      type: 'warning'
    });
    return;
  }
  sendCaptchaBtnDis.value = true;//禁用按钮
  sendForgotPassCaptcha(email).then(resp=>{
    var x = 60;
    var timeOutId = setInterval(()=>{
      sendCaptchaBtnValue.value = x+'s';
      x--;
      if (x === 0) {
        sendCaptchaBtnValue.value = '发送验证码';
        sendCaptchaBtnDis.value = false;//解禁
        clearInterval(timeOutId);
      }
    },1000);
    ElMessage({
      message: '验证码已发送，请注意查看。',
      type: 'success'
    });
  }).catch(resp=>{
    ElMessage({
      message: '电子邮箱不存在或者有误，请重新输入！',
      type: 'warning'
    });
    sendCaptchaBtnDis.value = false;//解禁
  })
}

</script>
<template>
  <div class="main">
    <!-- 登录注册框 -->
    <div class="registerBox">
      <!-- 登录 -->
      <div class="registerBoxDialog logInDialog" v-show="isShow.logInDialog">
        <h2 style="padding: 30px 0;">登录</h2>
        <el-form>
          <el-form-item>
            <div style="width: 80px;">账号：</div><el-input class="input" placeholder="账号或电子邮箱" v-model="logInForm.account"></el-input>
          </el-form-item>
          <el-form-item>
            <div style="width: 80px;">密码：</div><el-input class="input" type="password" v-model="logInForm.password" placeholder="密码"></el-input>
          </el-form-item>
        </el-form>
        <br><br><br>
        <div style="float: left;" @click="isShow.logInDialog=false;isShow.forgotPassDialog=true">忘记密码</div>
        <div style="float: left;">&ensp;或&ensp;</div>
        <div style="float: left;" @click="isShow.logInDialog=false;isShow.signInDialog=true">注册</div>
        <el-button style="float: right;" @click="logIn">登录</el-button>
      </div>
      <!-- 注册 -->
      <div class="registerBoxDialog signInDialog" v-show="isShow.signInDialog">
        <h2 style="padding: 30px 0;">注册</h2>
        <el-form :model="signInForm">
          <el-form-item>
            <div style="width: 80px;">用户名：</div><el-input class="input" v-model="signInForm.user.username" placeholder="账号"></el-input>
          </el-form-item>
          <el-form-item>
            <div style="width: 80px;">电子邮箱：</div><el-input class="input" v-model="signInForm.user.email" placeholder="电子邮箱"></el-input>
          </el-form-item>
          <el-form-item>
            <div style="width: 80px;">验证码：</div>
            <el-input v-model="signInForm.captcha" placeholder="" style="float: right; width: 200px;"></el-input>
            <el-button @click="signInCaptcha(signInForm.user.email)" :disabled="sendCaptchaBtnDis" style="width: 100px; margin-left: 20px;">{{sendCaptchaBtnValue}}</el-button>
          </el-form-item>
          <el-form-item>
            <div style="width: 80px;">密码：</div><el-input class="input" v-model="signInForm.password1" placeholder="密码"></el-input>
          </el-form-item>
          <el-form-item>
            <div style="width: 80px;">确认密码：</div><el-input class="input" v-model="signInForm.password2" placeholder="密码"></el-input>
          </el-form-item>
        </el-form>
        <div style="float: left;">拥有账号？</div>
        <div style="float: left;" @click="isShow.signInDialog=false;isShow.logInDialog=true">登录</div>
        <el-button style="float: right;" @click="signIn">注册</el-button>
      </div>
      <!-- 忘记密码 -->
      <div class="registerBoxDialog forgotPassDialog" v-show="isShow.forgotPassDialog">
        <h2 style="padding: 30px 0;">忘记密码</h2>
        <el-form :model="forgotPassForm">
          <el-form-item>
            <div style="width: 80px;">电子邮箱：</div><el-input class="input" v-model="forgotPassForm.email" placeholder="电子邮箱"></el-input>
          </el-form-item>
          <el-form-item>
            <div style="width: 80px;">验证码：</div>
            <el-input v-model="forgotPassForm.captcha" placeholder="" style="float: right; width: 200px;"></el-input>
            <el-button @click="forgotPassCaptcha(forgotPassForm.email)" :disabled="sendCaptchaBtnDis"  style="width: 100px; margin-left: 20px;">{{sendCaptchaBtnValue}}</el-button>
          </el-form-item>
          <el-form-item>
            <div style="width: 80px;">新密码：</div><el-input class="input" v-model="forgotPassForm.password1" placeholder="新密码"></el-input>
          </el-form-item>
          <el-form-item>
            <div style="width: 80px;">确认密码：</div><el-input class="input" v-model="forgotPassForm.password2" placeholder="确认密码"></el-input>
          </el-form-item>
        </el-form>
        <div style="float: left;" @click="isShow.forgotPassDialog=false;isShow.logInDialog=true">去登录</div>
        <el-button style="float: right;" @click="forgotPass">忘记密码</el-button>
      </div>
    </div>
  </div>
</template>
<style scoped>
.main {
  overflow: hidden;
  margin: 0;
  border: 0;
  width: 100vw;
  height: calc(100vh - 50px);
  /*!* 加载背景图 *!*/
  background-image: url('/login_backgroud.jpeg');
  /*!* 背景图垂直、水平均居中 *!*/
  background-position: center center;
  /*!* 背景图不平铺 *!*/
  background-repeat: no-repeat;
  /*!* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 *!*/
  background-attachment: fixed;
  /*!* 让背景图基于容器大小伸缩 *!*/
  background-size: cover;
  /*!* 设置背景颜色，背景图加载过程中会显示背景色 *!*/
  background-color: #464646;
}

::-webkit-scrollbar {
  display: none;
}

.registerBox {
  /* background: linear-gradient(
    217deg,
    rgba(255, 0, 0, 0.6),
    rgba(255, 0, 0, 0) 70.71%
  ), linear-gradient(127deg, rgba(0, 255, 0, 0.6), rgba(0, 255, 0, 0) 70.71%),
  linear-gradient(336deg, rgba(0, 0, 255, 0.6), rgba(0, 0, 255, 0) 70.71%); */
  /* background: linear-gradient(270deg, #ce68d9, #45c6db, #45db79);
  background-size: 800% 100%;
  -webkit-animation: AnimationName 8s ease infinite;
  -moz-animation: AnimationName 8s ease infinite;
  animation: AnimationName 8s ease infinite;
  cursor: pointer; */
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(20px);
  width: 500px;
  min-height: 400px;
  border-radius: 20px;
  margin: 160px auto;
  box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.6);
  transition: 0.4s ease-out;
}

.registerBox1:hover {
  box-shadow: 0 0 25px 0 rgba(255, 255, 255, 0.6);
}

/* .registerBoxBackgroudImg {
    width: 200px;
    height: 200px;
    position: relative;
}

.registerBoxDialog {
    position: relative;
    top: -200px;
} */

/* @keyframes AnimationName {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
} */

.el-input__wrapper {
  background-color: rgba(240, 240, 240, 0.7) !important;
}

.logInDialog, .signInDialog, .forgotPassDialog {
  position: fixed;
  left: 50px;
  width: 400px;
  margin: 0 auto;
}

.el-form-item .input {
  float: right !important;
  width: 320px !important;
}

</style>
